<template>
	<view class="box-sizing-b w-full">
		<!-- 01. 头部组件 -->
		<use-header :search-tip="searchTip" :search-auto="searchAuto" type="gray" @search="search"></use-header>

		<!-- 02. 轮播区 -->
		<view v-if="swiperDatas && swiperDatas.length > 0" class="swiper-area margin-bottom-sm margin-lr-sm border-radius pos-r">
			<!-- 轮播组件 -->
			<swiper class="swiper w-full" autoplay indicator-dots indicator-color="#f7f7f7" indicator-active-color="#ff6a6c">
				<swiper-item v-for="(item, idx) in swiperDatas" :key="idx" class="swiper-item wh-full box-sizing-b">
					<view class="wh-full" @click.stop="topage(item)">
						<image class="border-radius wh-full" style="height: 180px;" mode="scaleToFill" lazy-load :src="item.pic" />
					</view>
				</swiper-item>
			</swiper>
		</view>
		<uni-notice-bar v-if="notice.title" color="rgb(255, 106, 108)" backgroundColor="rgb(255, 106, 108,0.1)" scrollable="true" single="true"
		:text="notice.title"></uni-notice-bar>

		<!-- 03. 分类区 -->
		<view v-if="categoryDatas && categoryDatas.length > 0" class="category-area use-area margin-lr-sm dgrid" style="grid-gap: 20rpx 20rpx" :style="{ 'grid-template-columns': `repeat(${parameter.classify_num}, 1fr)` }">
			<view v-for="(item, idx) in categoryDatas" :key="idx" class="category-item dflex dflex-flow-c margin-bottom-sm" @click="topage(item)">
				<image class="margin-bottom-xs" lazy-load :src="item.pic"></image>
				<text class="tac clamp">{{ item.name }}</text>
			</view>
		</view>
		<view class="gap"></view>
		<!-- 04. 热门榜单 -->
		<view class="margin-lr-sm">
			<use-list-title title="限时精选" size="32" fwt="600" color="#333" type="round" iconfont="icondaishouhuo-" @goto="limit"></use-list-title>
		</view>
		<view class="limit-area use-area margin-lr-sm">
			<scroll-view class="" scroll-x>
				<view class="dflex">
					<view class="item pos-r margin-right-sm" v-for="(item, idx) in goodsLimitDatas" :key="idx"
						@click="togoods(item)">
						<image class="border-radius-xs" mode="aspectFill" lazy-load :src="item.pic"></image>
						<text class="title clamp padding-bottom-xs">{{ item.title }}</text>
						<text class="price" style="font-size: 13px;">{{ item.sellPrice}}</text>
						<text class="m-price" style="margin-left: 2px;">{{ item.marketPrice  }}</text>
						<view v-if="item.isHot == 1" class="use-tag pos-a pos-top bg-base">热卖</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="gap"></view>

		<!-- 05. 热门推荐 -->
		<use-hot-goods :datas="goodsHotDatas" autoload="none" title-type="round" title="热门推荐"></use-hot-goods>

		<!-- 置顶 -->
		<use-totop ref="usetop" type="tabbar"></use-totop>
		<popup v-if="showNotice" type="3" :closeTime="3" :content="notice.content" @close="showNotice=false"></popup>
		<!-- #ifdef MP-WEIXIN -->
		<official-account @bindload="wxOAccountLoad" @binderror="wxOAccountErr"></official-account>
		<!-- #endif -->
	</view>
</template>

<script>
	import popup from "@/components/ge-popup.vue";
	import {store_index} from "../../js_sdk/apis/home.js"
	import {notice_page} from "../../js_sdk/apis/notice.js"
	export default {
		components: {
			popup
		},
		computed: {
			userInfo(){
				return this.$store.state.user.userInfo
			},
			isLogin(){
				return this.$store.getters['user/hasLogin']
			}
		},
		data() {
			return {
				env: {},
				parameter: {
					classify_num: 4
				},
				showNotice:false,
				// 头部参数
				searchAuto: !0,
				searchTip: '请输入搜索关键字',

				// 轮播区
				swiperDatas: [],
				// 金刚区分类
				categoryDatas: [],
				// 限时精选
				goodsLimitDatas: [],
				// 热门推荐
				goodsHotDatas: [],
				notice:{},
				noticeIndex:0,
				notices:[],
				scrollTop: 0
			};
		},
		// 监听页面加载
		onLoad() {
			this.loadData();
			notice_page({istop:1}).then(res=>{
				if(res.data.records.length>0){
					this.showNotice=true
					this.notice=res.data.records[0]
				}
			})
		},
		onPageScroll(e) {
			// this.scrollTop = e.scrollTop
			this.$refs.usetop.change(e.scrollTop);
		},
		// 监听用户下拉刷新
		onPullDownRefresh() {
			this.loadData(() => {
				uni.stopPullDownRefresh();
			});
		},
		// 用户点击右上角分享
		// https://uniapp.dcloud.io/api/plugins/share?id=showsharemenu
		onShareAppMessage: function(ops) {
			let _this = this,
				mid = 0;

			if (_this.member && _this.member._id) {
				mid = _this.member._id;
			}

			return {
				title: '世华圣医电商',
				path: `/pages/tabbar/home?mid=${mid}`,
				// imageUrl: 'https://mall-os-api.use-cloud.com/files/upload/image/20200408/200408115587860242.jpg',
				success: function(res) {
					// 转发成功
					console.log('转发成功', res);
				},
				fail: function(res) {
					// 转发失败
					console.log('转发失败', res);
				}
			};
		},


		methods: {
			// 加载数据
			async loadData(callback) {
				store_index().then(({data})=>{
					data.forEach(v=>{
						if(v.type=="banner"){
							// 轮播图
							this.swiperDatas =v.componentContent.bannerData
						}else if(v.type=="noticeBar"){

						}else if(v.type=="menu"){
							// 分类导航
							// #ifdef APP-PLUS || H5
							this.categoryDatas = v.componentContent.menus
							// #endif
							// #ifdef MP-WEIXIN
							this.categoryDatas = v.componentContent.menus.filter(item=>item.name !== '领取红包') //如果在小程序序不展示'领取红包'
							// #endif
						}else if(v.type=="adv"){

						}else if(v.type=="hotCommodity"){
							// 热门推荐
							this.goodsHotDatas=v.componentContent
						}else if(v.type=="promotionGood"){
							// 精选
							this.goodsLimitDatas =v.componentContent
						}
					})
					callback&&callback()
					uni.setStorage({ key: '__use_home', data: data });
				})

			},
			// 搜索回调函数
			search() {
				console.log('home search');
			},
			// 跳转页面
			topage(item) {
				if (item.url.indexOf("http")==0) {
					uni.navigateTo({
						url: `/pages/content/web?url=${item.url}`
					});
				} else {
					uni.navigateTo({
						url: `${item.url}`,
						fail:(err)=>{
							console.log(err)
							uni.switchTab({
								url:`${item.url}`,
								fail:(err)=>{
									uni.showModal({
										title:"提示",
										content:"暂未开放，敬请期待。"
									})
								}
							})
						}
					});
				}
			},
			// 限时精选 -> 商品详情
			togoods(item) {
				// 跳转商品详情
				getApp().globalData.goods=item
				uni.navigateTo({
					url:"../../pages/goods/goods?id="+item.id
				})
			},
			// 限时精选
			limit() {
				this.$api.togoodslist({
					limited: 1
				});
			},
			// 拼团
			group(){
				uni.navigateTo({
				    url: '/pages/home/group/group'
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}

	/* 轮播图区 */
	.swiper-area {
		.swiper {
			height: 180px;
		}
	}

	/* 分类区 */
	.category-area {
		padding: 30rpx 10rpx 10rpx !important;

		.category-item {
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
		}

		image {
			width: 90rpx;
			height: 90rpx;
		}
	}

	/* 限时精选区 */
	.limit-area {
		min-height: 240rpx;

		.item {
			width: 240rpx;

			image {
				width: 240rpx;
				height: 240rpx;
			}
		}
	}

</style>
